<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>搜索</title>
    <link rel="stylesheet" href="./css/common.css" />
    <style>
      body {
        background-color: #fff;
      }
      .top {
        height: 100px;
        justify-content: space-between;
      }
      .top img {
        height: 50px;
      }
      input {
        height: 50px;
        font-size: 22px;
        width: 95%;
        border: none;
      }
      .nav-sousuo {
        border-bottom: solid 1px rgb(102, 101, 101);
        margin-top: 10px;
      }
      .nav-sousuo span {
        font-size: 20px;
        margin-left: 5px;
        color: rgb(180, 179, 179);
      }
      .nav-content {
        border: 1px solid rgb(224, 224, 224);
        border-top: 0;
        height: 350px;
        padding: 5px 0;
        font-size: 15px;
        color: rgb(158, 157, 157);
      }
      .nav-content li {
        height: 33px;
        line-height: 33px;
        box-sizing: border-box;
        padding: 0 20px;
        margin-top: 2px;
        transition: 0.3s;
      }
      .nav-content li:hover {
        background-color: rgb(235, 234, 234);
      }
    </style>
  </head>
  <body>
    <div class="top flex in">
      <img
        src="https://dsfs.oppo.com/oppo/shop-pc-v2/main/img/2bdb956.png?x-oss-process=image/format,webp"
        alt=""
        onclick="toindex()"
      />
      <svg
        t="1633515457506"
        class="icon"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="3441"
        width="25"
        height="25"
      >
        <path
          d="M558.096874 509.244236l278.304494-276.863678c13.159718-13.094226 13.226233-34.31248 0.132006-47.472198-13.123902-13.189394-34.305317-13.226233-47.465035-0.132006L510.692215 461.669708 234.740302 184.877661c-13.062504-13.093203-34.310434-13.159718-47.470151-0.066515-13.129019 13.093203-13.160741 34.342156-0.066515 47.501874l275.885398 276.725532L184.918593 785.733385c-13.160741 13.094226-13.226233 34.310434-0.134053 47.472198 6.54609 6.581905 15.172561 9.900487 23.799032 9.900487 8.56098 0 17.125029-3.252067 23.672142-9.768481l278.236955-276.761348 278.473339 279.31245c6.54609 6.582929 15.142885 9.871835 23.768333 9.871835 8.594749 0 17.155728-3.288906 23.701818-9.80532 13.123902-13.093203 13.159718-34.305317 0.066515-47.465035L558.096874 509.244236 558.096874 509.244236zM558.096874 509.244236"
          p-id="3442"
        ></path>
      </svg>
    </div>
    <div class="nav in">
      <p class="nav-sousuo">
        <input type="text" name="" id="ipt" placeholder="OPPO K9 Pro" />
        <span>搜索</span>
      </p>
      <ul class="nav-content">
        <li>OPPO K9 Pro</li>
        <li>OPPO Reno6</li>
        <li>真我GT node2</li>
        <li>真我GT 大师探索版</li>
        <li>OnePlue 9RT</li>
        <li>OnePlue 9R</li>
        <li>OnePlue 8 Pro</li>
        <li>OPPO Enco Air</li>
        <li>森米数据线</li>
        <li>Find X3</li>
      </ul>
    </div>
    <!-- https://www.baidu.com/sugrec?callback=box&prod=pc_hao123&wd=b&pre=1&p=3&ie=utf-8&json=1&from=pc_hao123&_=1631670694504-->
    <script>
      function sousuo() {
        let ipt = document.querySelector("#ipt");
        ipt.onchange = function () {
          let res = ipt.value;
          // console.log(res);
          let script = document.createElement("script");
          script.src = `https://www.baidu.com/sugrec?callback=box&prod=pc_hao123&wd=${res}&pre=1&p=3&ie=utf-8&json=1&from=pc_hao123&_=1631670694504`;
          document.body.appendChild(script);
        };
      }
      sousuo();
      function box(obj) {
        // console.log(obj);
        let html = "";
        obj.g.forEach((v) => {
          html += `<li>${v.q}</li> `;
        });
        document.querySelector("ul").innerHTML = html;
        writerLi();
      }
      function writerLi() {
        let li = document.querySelectorAll("li");
        // console.log(li);
        //遍历li，点击后把li的内容赋值给 ipt.value
        li.forEach(function (item) {
          item.onclick = () => {
            //   console.log(item.innerHTML);
            ipt.value = item.innerHTML;
            // sousuo();
            // box();
          };
        });
      }
      document.querySelector(".icon").onclick = function () {
        // console.log(1);
        window.history.back(-1);
      };
      writerLi();
    </script>
  </body>
</html>
